<template>
	<div>
		<h1>商品列表</h1>
		
		<div style="display: flex; justify-content: flex-start; flex-wrap: wrap;">
			
			<!-- 代表一个商品 -->
			<div v-for="goods in goodsList" style="width: 300px; height: 300px; margin: 20px; 
				display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); border-radius: 10px; overflow: hidden;">
				<el-image fit="cover" :src="goods.image" style="width: 100%; height: 150px;"></el-image>
				<div style="width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly;
					padding: 10px; box-sizing: border-box;">
					
					<div style="font-size: 20px; font-weight: 900;">{{goods.title}}</div>
					<div style="font-weight: 900; color: red;">￥{{goods.price}}</div>
					<el-button size="mini" style="width: 100px; align-self: flex-end;" type="success" @click="addCart(goods.id)">添加购物车</el-button>
				</div>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return {
				//商品列表
				goodsList: []
			}
		},
		methods:{
			//查询商品列表
			queryGoodsList(){
				this.$.ajax({
					url:"/goods/list",
					success: (res) => {
						this.goodsList = res;
					} 
				});
			},
			//添加购物车
			addCart(gid){
				this.$.ajax({
					type: "POST",
					url: "/cart/insert",
					data: {
						gid: gid
					},
					success: (data) => {
						this.$message.success("购物车添加成功！");
					}
				});
			}
		},
		mounted() {
			//页面加载时触发...
			this.queryGoodsList();
		}
	}
</script>

<style>
</style>